<template>
  <div id='app'>
    <div class="My-head-area">
      <div>
        <img src="/123.ico" alt="">
      </div>
       <div>
         <p>立刻登录</p>
         <p>积分:{{integral}}</p>

      </div>
    </div>
    <van-notice-bar
  left-icon="volume-o"
  scrollable 
  text="新上线更稳定的付费快递查询接口"
/>
<div class="ddd">

</div>

<div class="my-orders">
  <div>
<van-icon name="notes-o" color="orange" size="1.5rem"/>
我的订单
  </div>
  <div>
    <span></span>
  </div>
</div>

<div class="For-matters">
  <ul>
    <li v-for="(c,i) in list" :key="i">
      <van-icon :name="c.img" size="2rem"/>
      <p>{{c.name}}</p>
    </li>
  </ul>

</div>

<div class="ddd">

</div>

<div class="User-MyAll">
  <ul>
      <li v-for="(c,i) in listUserMyAll" :key="i">
 <van-icon :name="c.img" size="2rem" :color="c.color"/>
      <p>{{c.name}}</p>
      </li>
  </ul>
</div>


<div class="dddd">
  {{footerText}}

</div>


  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        ...this.$listAll.listUserAwait
      
      ],
      integral:'0',
      listUserMyAll:[
        ...this.$listAll.listUserMyAll
      ],
      footerText:'The work of liu tao'


    }
  },
  methods: {

  },
  mounted() {

  },
  components: {

  }
}
</script>

<style lang='scss'>
.User-MyAll{
  width: 100vw;
  ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    li{
      width: 33%;
      height: 10vh;
      display: flex;
      justify-content: center;
      flex-direction:column;
      align-items: center;
      margin-top: 10px;
      p{
        margin: 5px 0;
      }

     
    }

  }
  
}
.For-matters{
  display: flex;
  width: 100vw;
  height: 10vh;
  ul{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    li{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

}

.My-head-area{
  width: 100vw;
  height: 25vh;
  background-color: rgb(235, 225, 87);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  div:nth-child(1){
    margin: 0 5vw;
    img{
      width: 80px;
      height: 80px;
      border-radius:50% ;
    }

  }
  div:nth-child(2){
    margin-top:-20px ;
    p:nth-child(1){
      color: white;
      font-size: 24px;
      margin: 20px 0;
    }

  }

}
.dddd{
    width: 100vw;
  height: 12px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
}
.ddd{
  width: 100vw;
  height: 10px;
  background-color: #ccc;
}
.my-orders{
  width: 100vw;
  height: 6vh;
  border-bottom:1px solid #ccc ;
  display: flex;
  justify-content: space-between;

  align-items: center;
 
  div:nth-child(2){
    display: flex;
    width: 10%;
    justify-content: center;
    
 span{
   display: block;
    width: 15px;
    height: 15px;
    border: 2px solid black;
    border-top: none ;
    border-left: none ;
    transform: rotateZ(-45deg) ;



  }
  }
  div:nth-child(1){
    width: 30%;
    display: flex;
    justify-content: space-around;
    align-items: center;

  }
 

}
</style>
